<html>
    <head>
        <title></title>
        <style>
            *{margin: 0px;padding: 0px;font-family: tahoma;font-size: 13px;color:#555}
            .tab-contentner{
                width:880px;
                height:350px;
                border: #0487BD 1px solid;
                background-color: #fff;
                margin: 0 auto;
                margin-top: 100px;
                overflow: hidden
            }.tab-contentner  header{
                height:45px;
                overflow: hidden
            }.tab-contentner  .header li{
                float: left;
                list-style: none;
                min-width: 120px;
                height:45px;
                line-height: 3.5em;
                padding-left: 10px;
            }.tab-color{
                
            }.active{
                color: #FFF;
                text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
                background: #1ABDE7;
                background: -moz-linear-gradient(top, #1ABDE7 0%, #1C9DD1 100%);
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1ABDE7), color-stop(100%,#1C9DD1));
                background: -webkit-linear-gradient(top, #1ABDE7 0%,#1C9DD1 100%);
                background: -o-linear-gradient(top, #1ABDE7 0%,#1C9DD1 100%);
                background: -ms-linear-gradient(top, #1ABDE7 0%,#1C9DD1 100%);
                background: linear-gradient(to bottom, #1ABDE7 0%,#1C9DD1 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1abde7', endColorstr='#1c9dd1',GradientType=0 );
            }.no-active{
                color: #555;
                background-color: none;
                border: #0487BD 1px solid;
                border-top: none
            }.active,.no-active{
               border-bottom: #0487BD 1px solid;
            }.main-tab{
                clear: both;
                padding: 10px;
                overflow: hidden
            }.main-tab > div{overflow: hidden;height: auto;float: left}
            .table-wiged{
                border: #ccc 1px solid;
                border-collapse: collapse;
                margin: 0 auto;
                margin-top: 200px;
                box-shadow: 0 0 13px #DFDFDF;
                margin-bottom: 200px
            } .table-wiged th,td{
                border: #ccc 1px solid;
                padding: 8px;
                background-color: #f4f4f4;
            }
            .table-wiged th{
                border-top: #6D6D6D 3px solid;
            }
             .table-wiged td{
                background-color: #fff;border: none
            }
            tr.colorrow td{
                color: #FFF;
                text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
                background: #1ABDE7;
                background: -moz-linear-gradient(top, #1ABDE7 0%, #1C9DD1 100%);
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1ABDE7), color-stop(100%,#1C9DD1));
                background: -webkit-linear-gradient(top, #1ABDE7 0%,#1C9DD1 100%);
                background: -o-linear-gradient(top, #1ABDE7 0%,#1C9DD1 100%);
                background: -ms-linear-gradient(top, #1ABDE7 0%,#1C9DD1 100%);
                background: linear-gradient(to bottom, #1ABDE7 0%,#1C9DD1 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1abde7', endColorstr='#1c9dd1',GradientType=0 );
                border-bottom: #006BA7 1px solid;
                border-top: #006BA7 1px solid;
                cursor:pointer
            }.border-row{
                border: #0487BD 1px solid;
            }
        </style>
        <script  src="<?=base_url()?>res/javascripts/jquery/jquery-1.8.3.js"  ></script>
        <script  src="<?=base_url()?>res/javascripts/jquery/jquery-ui-1.9.2.custom.js"  ></script>
        <script  src="<?=base_url()?>res/javascripts/jquery.easing.1.3.js"  ></script>
        <script  src="<?=base_url()?>res/javascripts/drop.js"  ></script>
    </head>
    <body>
        <div  style="margin-left: 100px">
            <div  id="d1"  style="margin-left:200;top:200px;position: fixed;width:300px;height:100px;background-color: #ccc"></div>
        </div>
    <table  class="table-wiged" width="600" border="0" align="center" cellpadding="0" cellspacing="0">
        <thead>
      <tr>
        <th align="center" valign="middle">&nbsp;CustomerID</th>
        <th align="center" valign="middle">&nbsp;Name</th>
        <th align="center" valign="middle">&nbsp;Gender</th>
        <th align="center" valign="middle">&nbsp;Phone</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td align="center" valign="middle">&nbsp;CM000001</td>
        <td align="center" valign="middle">&nbsp;Saranyoo  Kraharn</td>
        <td align="center" valign="middle">&nbsp;Male</td>
        <td align="center" valign="middle">&nbsp;09-0987675</td>
      </tr>
      <tr>
        <td align="center" valign="middle">&nbsp;CM000001</td>
        <td align="center" valign="middle">&nbsp;Saranyoo  Kraharn</td>
        <td align="center" valign="middle">&nbsp;Male</td>
        <td align="center" valign="middle">&nbsp;09-0987675</td>
      </tr>
      <tr>
        <td align="center" valign="middle">&nbsp;CM000001</td>
        <td align="center" valign="middle">&nbsp;Saranyoo  Kraharn</td>
        <td align="center" valign="middle">&nbsp;Male</td>
        <td align="center" valign="middle">&nbsp;09-0987675</td>
      </tr>
      <tr>
        <td align="center" valign="middle">&nbsp;CM000001</td>
        <td align="center" valign="middle">&nbsp;Saranyoo  Kraharn</td>
        <td align="center" valign="middle">&nbsp;Male</td>
        <td align="center" valign="middle">&nbsp;09-0987675</td>
      </tr>
      <tr>
        <td align="center" valign="middle">&nbsp;CM000001</td>
        <td align="center" valign="middle">&nbsp;Saranyoo  Kraharn</td>
        <td align="center" valign="middle">&nbsp;Male</td>
        <td align="center" valign="middle">&nbsp;09-0987675</td>
      </tr>
      <tr>
        <td align="center" valign="middle">&nbsp;CM000001</td>
        <td align="center" valign="middle">&nbsp;Saranyoo  Kraharn</td>
        <td align="center" valign="middle">&nbsp;Male</td>
        <td align="center" valign="middle">&nbsp;09-0987675</td>
      </tr>
      <tr>
        <td align="center" valign="middle">&nbsp;CM000001</td>
        <td align="center" valign="middle">&nbsp;Saranyoo  Kraharn</td>
        <td align="center" valign="middle">&nbsp;Male</td>
        <td align="center" valign="middle">&nbsp;09-0987675</td>
      </tr>
      <tr>
        <td align="center" valign="middle">&nbsp;CM000001</td>
        <td align="center" valign="middle">&nbsp;Saranyoo  Kraharn</td>
        <td align="center" valign="middle">&nbsp;Male</td>
        <td align="center" valign="middle">&nbsp;09-0987675</td>
      </tr>
      <tr>
        <td align="center" valign="middle">&nbsp;CM000001</td>
        <td align="center" valign="middle">&nbsp;Saranyoo  Kraharn</td>
        <td align="center" valign="middle">&nbsp;Male</td>
        <td align="center" valign="middle">&nbsp;09-0987675</td>
      </tr>
      <tr>
        <td align="center" valign="middle">&nbsp;CM000001</td>
        <td align="center" valign="middle">&nbsp;Saranyoo  Kraharn</td>
        <td align="center" valign="middle">&nbsp;Male</td>
        <td align="center" valign="middle">&nbsp;09-0987675</td>
      </tr>
      <tr>
        <td align="center" valign="middle">&nbsp;CM000001</td>
        <td align="center" valign="middle">&nbsp;Saranyoo  Kraharn</td>
        <td align="center" valign="middle">&nbsp;Male</td>
        <td align="center" valign="middle">&nbsp;09-0987675</td>
      </tr>
      <tr>
        <td align="center" valign="middle">&nbsp;CM000001</td>
        <td align="center" valign="middle">&nbsp;Saranyoo  Kraharn</td>
        <td align="center" valign="middle">&nbsp;Male</td>
        <td align="center" valign="middle">&nbsp;09-0987675</td>
      </tr>
      </tbody>
    </table>
        <!--
        <div  class="tab-contentner">
            <div class="header">
                <li  class="active"> Home </li>
                <li class="no-active">Setting</li>
                <li class="active">About</li>
            </div>
            <div class="main-tab">
                <div  id="tab-1">
                          Freebie Web Resources is a premiere blog that offers the best selection of WordPress themes, design tutorials, aFreebie Web Resources is a premiere blog that offers the best selection of WordPress themes, design tutorials, aFreebie Web Resources is a premiere blog that offers the best selection of WordPress themes, design tutorials, aFreebie Web Resources is a premiere blog that offers the best selection of WordPress themes, design tutorials, aFreebie Web Resources is a premiere blog that offers the best selection of WordPress themes, design tutorials, aFreebie Web Resources is a premiere blog that offers the best selection of WordPress themes, design tutorials, aFreebie Web Resources is a premiere blog that offers the best selection of WordPress themes, design tutorials, aFreebie Web Resources is a premiere blog that offers the best selection of WordPress themes, design tutorials, aFreebie Web Resources is a premiere blog that offers the best selection of WordPress themes, design tutorials, aFreebie Web Resources is a premiere blog that offers the best selection of WordPress themes, design tutorials, aFreebie Web Resources is a premiere blog that offers the best selection of WordPress themes, design tutorials, aFreebie Web Resources is a premiere blog that offers the best selection of WordPress themes, design tutorials, aFreebie Web Resources is a premiere blog that offers the best selection of WordPress themes, design tutorials, aFreebie Web Resources is a premiere blog that offers the best selection of WordPress themes, design tutorials, aFreebie Web Resources is a premiere blog that offers the best selection of WordPress themes, design tutorials, aFreebie Web Resources is a premiere blog that offers the best selection of WordPress themes, design tutorials, aFreebie Web Resources is a premiere blog that offers the best selection of WordPress themes, design tutorials, aFreebie Web Resources is a premiere blog that offers the best selection of WordPress themes, design tutorials, aFreebie Web Resources is a premiere blog that offers the best selection of WordPress themes, design tutorials, a
                </div>
                <div  id="tab-2">
Freebie Web Resources is a premiere blog that offers the best selection of WordPress themes, design tutorials, aFreebie Web Resources is a premiere blog that offers the best selection of WordPress themes, design tutorials, aFreebie Web Resources is a premiere blog that offers the best selection of WordPress themes, design tutorials, a
                </div>
                <div  id="tab-3">333asfdsasfad</div>
            </div>
        </div>
        -->
        
    </body>
    <script>
      $(document).ready(function(){
          $("#d1").click(function(){
          
              $(this).html( "left : "  + $(this).offset().left + " --" + $(this).position().left   );
          });
      });
    </script>
</html>